<%
// 获取前20个文章
var articlePage = temp.articlePage(1, 20, session.site.model.site_folder_id);
var homeArticle = temp.article(session.site.model.site_article_id);
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>${HEAD_TITLE }</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="icon" href="${BASE_PATH }favicon.ico" />
	<link rel="shortcut icon" href="${BASE_PATH }favicon.ico" />
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta name="keywords" content="${HEAD_KEYWORDS }">
	<meta name="description" content="${HEAD_DESCRIPTION  }">
	
	<!-- IE兼容处理 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/fullPage.js/2.7.6/jquery.fullPage.min.css" />
	<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://cdn.bootcss.com/fullPage.js/2.7.6/jquery.fullPage.min.js"></script>
	<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

<style>
	/* Centered texts in each section
	* --------------------------------------- */
	.section{
		text-align:center;
		background-size: cover;
	}

	.section{
		/* background-image: url(bg1.jpg); */
		padding: 2% 0 0 0;
	}

	.section p{
		 color: #FFF;
	}

	/* Defining each sectino background and styles
	* --------------------------------------- */
	#fullpage {
	  font: 400 18px/1.62 "Georgia", "Xin Gothic", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
	  color: #111;
	}

	.navbar-default {
		background-color:transparent;
		border-color:transparent
	}

	.navbar-default .navbar-nav>li>a {
		color: #FFF;
	}

	.navbar-default .navbar-brand {
		color: #FFF;
	}

	.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus {
		border-radius: 5px;
		color: #333;
		background-color: transparent
	}

	.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus {
		border-radius: 5px;
		color: #555;
		background-color: #EEE
	}

</style>

<script type="text/javascript">
var anchorsArray = [];
var navigationTooltipsArray = [];
<% for(item in articlePage.list){ %>
	anchorsArray.push('j${item.id}');
	navigationTooltipsArray.push('${item.title}');
<% } %>
	$(document).ready(
			function() {
				$('#fullpage').fullpage({
					anchors : anchorsArray, //[ 'j0','j1', 'j2','j3','j4','j5','j6'  ],
					navigation : true,
					navigationPosition : 'right',
					navigationTooltips :  navigationTooltipsArray // [ '英雄联盟','德玛西亚皇子', '德邦总管','黑暗之女', '皎月女神','寒冰射手','联系我们']
					,afterLoad: function(anchorLink, index){
						$('ul.nav li').removeClass('active');
						$('ul.nav li#nav_'+anchorLink).addClass('active');

					}
				});
			});
</script>

</head>
<body>
	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<a class="navbar-brand" href="#"> <img alt="logo" src="${flyfox.getImage(homeArticle)}" width="24" height="24">
					${homeArticle.title}
				</a>
			</div>
			<div class="container">
				<ul class="nav navbar-nav navbar-right">
					<% for(item in articlePage.list){ %>
						<li id="nav_j${item.id}"><a href="#j${item.id}">${item.title}</a></li>
					<% } %>
				</ul>
			</div>
		</div>

	</nav>


	<div id="fullpage">
		<% for(item in articlePage.list){ %>
			<div class="section" id="section${itemLP.index}" style="background-image: url(${flyfox.getImage(item)});">
				${item.content!}
			</div>
		<% } %>
		
	</div>

</body>
</html>
